import React, { useState, useRef } from 'react'
import { Input, Space, Button, message } from 'antd';
import CheckBtn from '../../../components/customerseas/CheckBtn';
import myAxios from '../../../utils/myAxios';
import store from '../../../redux/store';
import { AsyncTableDataAction } from '../../../redux/action/customerAction/tableData';

export default function DelateCustomer(props) {
  const { TextArea } = Input;
  const text = useRef()
  const { setisShowDeleta, userInfo } = props;
  // console.log(userInfo);
  // 从userInfo里取出客户id，然后展示在已选中客户编号那里
  const getUserId = () => {
    let tempArr = []
    userInfo.forEach(item => {
      tempArr.push(item.key)
    })
    return tempArr
  }
  //复选按钮数组
  const checkArr = [
    { id: '1', title: '联系人', check: false },
    { id: '2', title: '跟单', check: false },
    { id: '3', title: '订单', check: false },
    { id: '4', title: '合同', check: false },
    { id: '5', title: '售后', check: false },
    { id: '6', title: '财务', check: false },
    { id: '7', title: '工单', check: false },
    { id: '8', title: '附件', check: false },
  ]
  const [stateBtn, setstateBtn] = useState(checkArr);

  //子组件按钮传递id
  const getChecked = (id) => {
    stateBtn.forEach((item) => {
      if (item.id == id) {
        item.check = !item.check
      }
    })
    setstateBtn(stateBtn.concat([]))
  }

  //提交删除, 然后需要发起一个 异步action获取table数据
  const submitDelete = () => {
    //获取哪些按钮被点击了
    const checkBtnArr = stateBtn.filter((item) => item.check)
    console.log(checkBtnArr);
    //获取删除原因
    let deleterReason = text.current.resizableTextArea.textArea.value;
    //获取客户id
    let idArr = getUserId()  //得到的是一个数组
    //整合所有需要的数据
    let deleteCustomerVo = {
      afterSaleType: 1,
      contactsType: 1,
      contractType: 1,
      deleterReason,
      documentaryType: 1,
      enclosureType: 1,
      financeType: 1,
      id: idArr,
      orderType: 1,
      workOrderType: 1
    }
    checkBtnArr.forEach(item => {
      if (item.title == '联系人') {
        deleteCustomerVo.contactsType = 2
      } else if (item.title == '售后') {
        deleteCustomerVo.afterSaleType = 2
      } else if (item.title == '跟单') {
        deleteCustomerVo.documentaryType = 2
      } else if (item.title == '财务') {
        deleteCustomerVo.financeType = 2
      } else if (item.title == '订单') {
        deleteCustomerVo.orderType = 2
      } else if (item.title == '工单') {
        deleteCustomerVo.workOrderType = 2
      } else if (item.title == '合同') {
        deleteCustomerVo.contractType = 2
      } else if (item.title == '附件') {
        deleteCustomerVo.enclosureType = 2
      }
    })
    // console.log(deleteCustomerVo);
    //发起删除请求
    myAxios({
      method: 'post',
      url: '/customer/deleteCustomer',
      data: { ...deleteCustomerVo }
    })
      .then(res => {
        // console.log(res.data);
        if (res.data.code == 200) {
          setisShowDeleta(false)
          store.dispatch(AsyncTableDataAction(1, 7,0, 0, 1, '',0))
          message.success('删除成功！')
        } else {
          message.error(res.data.msg)
        }
      })

  }

  return (
    <div>
      <h3 >删除</h3>
      <div style={{ fontWeight: 'bolder', textAlign: 'center' }}>删除 原因</div>
      <TextArea ref={text} style={{ margin: '10px 10px 10px 0px' }} rows={3} />
      <div>同时删除以下关联记录 <span style={{ color: 'red' }}>(无法恢复)</span> ：</div>


      <CheckBtn click={getChecked} stateBtn={stateBtn} />

      <div style={{ margin: '10px 10px 30px 0px' }}>已选中客户编号：<span>{getUserId()}</span> </div>
      <div style={{ textAlign: 'center', borderTop: '1px dashed gray', padding: 20 }}>
        <Space>
          <Button style={{ width: 100 }} size='midle' type="primary" htmlType="submit"
            onClick={() => {
              submitDelete()
            }
            }
          >
            保存
          </Button>
          <Button onClick={() => { setisShowDeleta(false) }} style={{ width: 100 }} size='midle' danger type="primary" >
            取消
          </Button>
        </Space>
      </div>
    </div>
  )
}
